<template>
  <div>
    <vm-common-header
      :pageTitle="pageTitle"
      :goBack="goBack"></vm-common-header>
    <div class="vm-common-work_bench container">
      <mt-loadmore
        :top-method="loadTop"
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        ref="loadmore"
        :autoFill="false">
        <swipeout>
          <swipeout-item
            ref="swipeoutItem"
            :right-menu-width="30"
            :sensitivity="15"
            v-for="(item, key) in supplierData"
            :key="key"
            :auto-close-on-button-click="false">
            <div slot="left-menu">
              <swipeout-button style="background-color: #1AAD19;" @click.native="enableOfstopItem(item,key,1)" type="primary">
                启用
              </swipeout-button>
            </div>
            <div slot="right-menu">
              <swipeout-button style="background-color: #E64340;" @click.native="enableOfstopItem(item,key,0)" type="primary">
                停用
              </swipeout-button>
            </div>
            <div slot="content" class="demo-content vux-1px-b">
              <ul>
                <li ref="oli"  class="mui-selected vm-work_bench-item mui-table-view-cell">
                  <router-link class="mui-slider-handle" tag="div" :to="`/common_details/${item.id}/供应商详情`">
                    <h5 class="vm-work_bench-item-title">
                      {{ item.cCompanyName }}
                      <x-icon type="ios-arrow-right" size="22"></x-icon>
                    </h5>
                    <div class="vm-work_bench-item-body">
                      <div>
                        <span>编码:</span>
                        <em>{{ item.cVendorCode }}</em>
                      </div>
                      <div>
                        <span>审核状态:</span>
                        <em class="is-status-o" v-if="item.iStatus == '审核通过'">{{ item.iStatus }}</em>
                        <em class="is-status-n" v-if="item.iStatus == '未审核'">{{ item.iStatus }}</em>
                      </div>
                      <div>
                        <span>启用状态:</span>
                        <em
                          v-if="item.iIStop == 0">
                          <img src="../../../static/images/blockup.png" alt="">
                        </em>
                        <em
                          v-if="item.iIStop == 1">
                          <img src="../../../static/images/enable.png" alt="">
                        </em>
                      </div>
                      <div>
                        <span>联系人:</span><em>{{ item.cPersonName }}</em>
                      </div>
                      <div>
                        <span>互动次数:</span><em>{{ item.num }}</em>
                      </div>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
          </swipeout-item>
        </swipeout>
        <vm-common-noData v-if="!supplierData.length"></vm-common-noData>
      </mt-loadmore>
    </div>
  </div>
</template>

<script>
  import vmCommonHeader from '@/components/vm-common-header' // header 组件
  import { userInfoByArguments } from '@/utils/userHandler.js'
  import { Swipeout, SwipeoutItem, Confirm, SwipeoutButton  } from 'vux'
  import { MessageBox } from 'mint-ui';
  import { vendorchecklist_vendorList, vendorchecklist_stopVendor } from '@/api/category_supplier.js'
  export default {
    data () {
      return {
        pageTitle: this.$route.meta.pageTitle,
        goBack: this.$route.meta.goBack,
        supplierPage: 1,
        supplierRow: 10,
        supplierData: new Array(),
        allLoaded: false,
        btnArray: ['确认', '取消'],
        disabled: false,
        show: false
      }
    },
    created () {
      this.getsupplierData();
    },
    mounted () {},
    methods: {
      // 获取供应商管理数据
      getsupplierData(loadmoreType) {
        let supplierPage = this.supplierPage;
        let comID = userInfoByArguments('company_id');
        vendorchecklist_vendorList({comID}).then(res => {
          if (!res.data.data.length) {
            this.allLoaded = true; // 若数据已全部获取完毕
          }
          if (!this.supplierData.length || supplierPage == 1) {
            this.allLoaded = false;
            this.supplierData = res.data.data;
          } else {
            this.supplierData = res.data.data.concat(this.supplierData);
          }
          if (loadmoreType == 'top') {
            this.$refs.loadmore.onTopLoaded();
          } else if (loadmoreType == 'bottom'){
            this.$refs.loadmore.onBottomLoaded();
          }
          this.supplierData.sort((a,b) => {
            return b.num - a.num;
          });
        })
      },
      loadTop () {
        this.supplierPage = 1;
        this.getsupplierData('top');
      },
      loadBottom () {
        this.supplierPage ++;
        this.getsupplierData('bottom');
      },
      // 启用/停用方法
      enableOfstopItem (item, key, type) {
        // @type '0'停止使用 '1'启用状态
        let id_arr = item.id;
        let comID = userInfoByArguments('company_id'); // 当前登录公司id
        let cUserId = userInfoByArguments('cUserId'); // 当前登录公司id
        if (item.iIStop == type && type == 0) {
          this.$toast('停用状态无法再次停用');
          this.closeSwipeout();
          return;
        } else if (item.iIStop == type  && type == 1) {
          this.$toast('启用状态无法再次启用');
          this.closeSwipeout();
          return;
        }
        vendorchecklist_stopVendor({id_arr, comID, cUserId, type}).then(res => {
          if (res.data.data == 1 && res.data.status == 200) {
            if (type ==  0) {
              this.$set(this.supplierData[key], 'iIStop', 0);
              this.closeSwipeout();
            } else if (type ==  1) {
              this.$set(this.supplierData[key], 'iIStop', 1);
              this.closeSwipeout();
            }
            this.$toast('操作成功');
          }
        })
      },
      // 关闭左滑、右滑功能
      closeSwipeout () {
        for ( let o of this.$refs.swipeoutItem) {
          o.close();
        }
      }
    },
    components: {
      'vm-common-header': vmCommonHeader,
      Swipeout,
      SwipeoutItem,
      SwipeoutButton,
      Confirm
    }
  }
</script>

<style lang="scss" scoped>
  .vm-work_bench-item {
    em {
      margin-left: 15px;
      img {
        width: 22px;
        height: 22px;
      }
    }
  }

</style>
